<template>
  <div class="app-container">
    <div class="app-title">
      <span>工作流退回节点控制</span>
    </div>
    <div class="filter-container">
        <el-row :gutter="20">
      <div class="filter-container">
        <el-col style="text-align:right;margin-top: -8px;margin-bottom:10px" :span="24">
          <el-button
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            @click="handleSave"
          >
            新增
          </el-button>
          <el-button
            size="small"
            font-size="14px"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            @click="handleUp"
          >
            修改
          </el-button>
          <el-button
            size="small"
            font-size="14px"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            @click="handleDel"
          >
            删除
          </el-button>
        </el-col>
      </div>
    </el-row>
    <el-table
      ref="singalTable"
      v-loading="listLoading"
      :height="tableHeight"
      :data="list"
      :stripe="true"
      fit
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <template slot="empty">
        <tableEmpty />
      </template>
      <el-table-column type="selection" align="center" width="50" />
      <el-table-column type="index" align="center" width="50" label="序号" />

      <el-table-column label="操作节点" align="center">
        <template slot-scope="{row}">
          <span>{{ row.menu_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="目标节点" align="center">
        <template slot-scope="{row}">
          <span>{{ row.backto_menu_name }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog  v-dialogDrag   title="工作流节点配置" :visible.sync="hookUpFormVisible" width="40%" :close-on-click-modal="false">
    <el-form ref="hookUpForm" :model="formData" label-position="right" label-width="120px" size="small">
        <el-row style="margin-top: 2%">
        <el-col :span="12">
        <el-form-item label="退回操作节点" style="background-color: #f2f2f2" />
        <el-select ref="selectMenuReport" v-model="formData.menuName" class="filter-item" clearable placeholder="--请选择--" style="width:100%" @clear="clearmenuid">
            <el-option :value="formData.menuid" :label="formData.menuName" style="height:200px;overflow: auto;background-color:#fff">
                <el-tree
                    :data="menuParam"
                    :accordion="true"
                    :highlight-current="true"
                    :props="defaultProps"
                    node-key="guid"
                    :default-expanded-keys="defaultExpandedKey"
                    @node-click="handleMenuNodeClick"
                />
            </el-option>
        </el-select>
        </el-col>
        <el-col :span="12">
        <el-form-item label="目标节点" style="background-color: #f2f2f2" />
        <el-select ref="selectbackMenuReport" v-model="formData.backmenuName" class="filter-item" clearable placeholder="--请选择--" style="width:100%" @clear="clearbackmenuid">
            <el-option :value="formData.backmenuid" :label="formData.backmenuName" style="height:200px;overflow: auto;background-color:#fff">
                <el-tree
                    :data="menuParam"
                    :accordion="true"
                    :highlight-current="true"
                    :props="defaultProps"
                    node-key="guid"
                    :default-expanded-keys="defaultExpandedKey"
                    @node-click="handleBackMenuNodeClick"
                />
            </el-option> 
        </el-select>
        </el-col>
        </el-row>
        <el-row>
          <el-col style="text-align: center; margin-top:2%">
            <el-button type="primary" :loading="saveLoading" @click="handleSaveHookUpData">
              保存
            </el-button>
            <el-button @click="hookUpFormVisible = false">
              取消
            </el-button>
          </el-col>
        </el-row>
        </el-form>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import { getModule } from '@/api/module'
import tableEmpty from '@/components/table/empty'
import Pagination from '@/components/Pagination'
import { queryWorkflowBackConfig,saveWorkflowBackConfig,updateWorkflowBackConfig,deleteWorkflowBackConfig } from '@/api/salaryConfigManage/workflowBackConfig'
export default {
  name: 'WarningSet',
  components: { Pagination, tableEmpty },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'f_Icon'
      },
      tableHeight: null,
      menuParam: [],
      saveLoading: false,
      hookUpFormVisible: false,
      listLoading: true,
      total:0,
      defaultExpandedKey: [],
      list:[],
      selection:[],
      listQuery: {
        page: 1,
        limit: 200
      },
      quryform:'',//当前操作方式
      formData:{
        id:'',
        menuid:'',
        backmenuid:'',
        menuName: '',
        backmenuName: ''
      }
    }
  },
  created() {
    this.getList()
    this.getModule()
  },
  mounted() {
    this.getTbHeight()
  },
  methods: {
    getList() {
      queryWorkflowBackConfig(this.listQuery).then((response) => {
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
        this.quryform=''
        this.formData.id= ''
        this.formData.menuid=''
        this.formData.menuName=''
        this.formData.backmenuid= ''
        this.formData.backmenuName= ''
      })
    },
    // 获取table高度的方法
    getTbHeight() {
      this.tableHeight = window.innerHeight - 220
    },
    // 树点击
    handleMenuNodeClick(data) {
      if (data.isleaf === '1') {
        this.formData.menuid = data.guid
        this.formData.menuName = data.f_Icon
        this.$refs.selectMenuReport.blur()
      }
    }, // 树点击
    handleBackMenuNodeClick(data) {
      if (data.isleaf === '1') {
        this.formData.backmenuid = data.guid
        this.formData.backmenuName = data.f_Icon
        this.$refs.selectbackMenuReport.blur()
      }
    },
    clearmenuid(){
      this.formData.menuid= ''
    },
    clearbackmenuid(){
      this.formData.backmenuid= ''
    },
    handleSave(){
        this.quryform='save'
        this.hookUpFormVisible=true
    },
    handleUp(){
        this.selection = this.$refs.singalTable.selection
        if (this.selection.length !== 1) {
            this.$message({
          showClose: true,
          message: '请选择退单条修改！',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.quryform='up'
      this.selection.forEach(item => {
        this.formData.id= item.id
        this.formData.menuid=item.menu_id
        this.formData.menuName= item.menu_name
        this.formData.backmenuid= item.backto_menu_id
        this.formData.backmenuName= item.backto_menu_name
      })
    this.hookUpFormVisible=true
    },
     handleDel(){
         this.selection = this.$refs.singalTable.selection
        if (this.selection.length !== 1) {
            this.$message({
          showClose: true,
          message: '请选择退单条修改！',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.quryform='up'
      this.selection.forEach(item => {
        this.formData.id= item.id
      })
      deleteWorkflowBackConfig(this.formData.id).then((response) => {
         if (response.rscode === '100000') {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        }
      })
    },
    // 保存
    handleSaveHookUpData() {
        if(this.formData.menuid ===''||this.formData.menuid === null){
        this.$message({
          showClose: true,
          message: '请选择退回操作节点！',
          type: 'warning',
          duration: 2000
        })
        return
      }
      if(this.formData.backmenuid ===''||this.formData.backmenuid === null){
        this.$message({
          showClose: true,
          message: '请选择目标节点！',
          type: 'warning',
          duration: 2000
        })
        return
      }
      if(this.formData.backmenuid === this.formData.menuid ){
        this.$message({
          showClose: true,
          message: '退回操作节点与目标节点一致！',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.saveLoading=true
      if(this.quryform === 'save'){
          this.save()
      }else if(this.quryform === 'up'){
          this.up()
      }else{
        this.$message({
          showClose: true,
          message: '操作失败，请刷新重试！',
          type: 'warning',
          duration: 2000
        })
        this.saveLoading=false
      }
      
    },

    save(){
        saveWorkflowBackConfig(this.formData).then((response) => {
         if (response.rscode === '100000') {
          this.$message({
            showClose: true,
            message: '保存成功',
            type: 'success',
            duration: 2000
          }) 
        }
        this.saveLoading=false
        this.hookUpFormVisible=false
        this.getList()
      }).catch(() => {
         this.saveLoading=false
        this.hookUpFormVisible=false
        this.getList()
        })
    },
    up(){
        updateWorkflowBackConfig(this.formData).then((response) => {
         if (response.rscode === '100000') {
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success',
            duration: 2000
          })
        }
        this.saveLoading=false
        this.hookUpFormVisible=false
        this.getList()
        
      }).catch(() => {
         this.saveLoading=false
        this.hookUpFormVisible=false
        this.getList()
        })
    },
    getModule(){
        getModule().then((response) => {
            this.menuParam = JSON.parse(response.data.menus)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #dcdfe6;
}
.contentBorder {
  // border: #e5e6eb solid 1px;
  box-shadow:2px 2px 5px #e5e6eb;
  width: 90%;
  margin-top:50px;
  text-align: center;
  margin-left: 3%;
  .el-row:nth-child(1) {
    padding-top: 30px;
    .el-col:nth-child(1) {
      text-align: center;
    }
    .el-col:nth-child(3) {
      .el-input {
        margin-top: -10px;
      }
    }
    .el-col:nth-child(4) {
      text-align: right;
    }
  }
  .el-row:nth-child(2) {
    padding-top: 20px;
    padding-bottom: 30px;
    .el-col:nth-child(1) {
      text-align: right;
    }
  }
  .el-row:nth-child(3) {
    padding-top: 50px;
    padding-bottom: 30px;
    border-top: rgba(121, 121, 121, 1) solid 1px;
    .el-col:nth-child(1) {
      text-align: center;
    }
    .el-col:nth-child(3) {
      .el-input {
        margin-top: -10px;
        padding: 0px 5px 0px 10px;
      }
    }
    .el-col:nth-child(4) {
      text-align: right;
    }
  }
}
</style>
